import { Allotment } from 'allotment'
import "allotment/dist/style.css"
import Header from './components/Header'
import EditArea from './components/EditArea'
import Material from './components/Material'
import Setting from './components/Setting'
import MaterialWrapper from './components/MaterialWrapper'
import Prview from './components/Preview'
import { useComponentsStore } from './stores/components'

export default function LowcodeEditor() {
    const { mode } = useComponentsStore()
    return (
        <div className="h-[100vh] flex flex-col">
            <div className="h-[60px] flex items-center border-b-[1px] border-[#000]">
                <Header></Header>
            </div>
            {
                mode === 'edit' ? (<Allotment>
                    <Allotment.Pane preferredSize={240} maxSize={300} minSize={200}>
                        <MaterialWrapper></MaterialWrapper>
                    </Allotment.Pane>
                    <Allotment.Pane>
                        <EditArea></EditArea>
                    </Allotment.Pane>
                    <Allotment.Pane preferredSize={300} maxSize={500} minSize={300}>
                        <Setting></Setting>
                    </Allotment.Pane>
                </Allotment>) : (
                    <Prview></Prview>
                )
            }

        </div>
    )
}